<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="400px">
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="auto">
			<el-row class="mb20" :gutter="10">
				<el-col>
					<el-form-item label="用户昵称" prop="nickname">
						<el-input v-model="ruleForm.nickname" placeholder="请输入用户昵称" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col>
					<el-form-item label="微信号" prop="username">
						<el-input v-model="ruleForm.username" placeholder="请输入微信号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col>
					<el-form-item label="角色" prop="role">
						<el-select v-model="ruleForm.role" placeholder="请选择角色" class="w100">
							<el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col>
					<el-form-item label="主播认证码" prop="certificationUrl">
						<template #label>
							主播认证码<br />
							<span style="font-size: 12px; color: red">如果该微信号需要</span><br />
							<span style="font-size: 12px; color: red">作为直播号,请扫描</span><br />
							<span style="font-size: 12px; color: red">二维码进行身份验证</span>
						</template>
						<image-upload-cOS v-model="ruleForm.certificationUrl" isDelete ref="imageUploadCertificationUrlRef" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';

import { addLivesMember } from '/@/api/admin1';

export default {
	name: 'liveMemberAddDialog',
	setup() {
		const state = reactive({
			title: '直播成员添加',
			open: false,
			ruleForm: {
				nickname: '',
				username: '',
				role: '',
				certificationUrl: '',
			},
			roleOptions: [
				{
					value: 1,
					label: '管理员',
				},
				{
					value: 2,
					label: '主播',
				},
				{
					value: 3,
					label: '运营者',
				},
			],
			rules: {
				nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
				username: [{ required: true, message: '微信号不能为空', trigger: 'blur' }],
				role: [{ required: true, message: '角色不能为空', trigger: ['blur', 'change'] }],
			}, // 表单校验
			submitLoading: false,
		});

		const formRef = ref(null);
		const imageUploadCertificationUrlRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					console.log('state.form', state.ruleForm);
					_addLivesMember(state.ruleForm);
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			state.ruleForm.certificationUrl = 'https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh';
			nextTick(() => {
				(formRef.value as any)?.resetFields();
				(imageUploadCertificationUrlRef.value as any)?.reset();
				(imageUploadCertificationUrlRef.value as any)?.dataLoading();
			});
		};

		/********** 网络事件 **********/
		// 添加直播成员
		const _addLivesMember = (params: object) => {
			addLivesMember(params)
				.then(() => {
					ElMessage.success('添加成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			imageUploadCertificationUrlRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
